<template>
  <el-dialog
    v-bind="$attrs"
    width="1000px"
    :title="dialogForm.id ? '修改活动' : '新增活动'"
    center
  >
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      :rules="rules"
      label-width="auto"
      :disabled="isDetail"
    >
      <el-form-item label="活动名称" prop="exerciseName">
        <el-input v-model="dialogForm.exerciseName" />
      </el-form-item>
      <el-form-item label="标签" prop="label">
        <el-input-tag v-model="dialogForm.label" />
      </el-form-item>
      <el-form-item label="活动时间" prop="exerciseTime">
        <el-date-picker
          v-model="dialogForm.exerciseTime"
          type="datetimerange"
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="活动内容" prop="exerciseContent">
        <div v-if="isDetail" v-html="dialogForm.exerciseContent"></div>
        <Editor v-model="dialogForm.exerciseContent" v-else />
      </el-form-item>
      <el-form-item label="附件" prop="fileList">
        <FileUpload v-model:value="dialogForm.fileList" />
      </el-form-item>
      <el-form-item label="是否发布" prop="isPublish">
        <el-radio-group v-model="dialogForm.isPublish">
          <el-radio value="1">是</el-radio>
          <el-radio value="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onclose()">取消</el-button>
        <el-button type="primary" @click="submit(false)" v-if="isFabu"
          >保存</el-button
        >
        <el-button type="primary" @click="submit(true)" v-if="!isDetail">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { defineComponent, reactive, ref, toRefs, watch, computed } from "vue";
import Editor from "@/components/Editor/index.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import { modifyPortalExerciseInfo } from "@/api/api";
export default defineComponent({
  components: { Editor, FileUpload },
  props: {
    dataForm: Object,
    isDetail: {
      type: Boolean,
      default: false,
    },
    isFabu: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const dialogFormRef = ref();
    const dataMap = reactive({
      dialogForm: {},
      rules: {
        exerciseName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        label: [{ required: true, message: "请输入标签", trigger: "blur" }],
        exerciseTime: [
          { required: true, message: "请选择活动时间", trigger: "change" },
        ],
        exerciseContent: [
          { required: true, message: "请输入活动内容", trigger: "blur" },
        ],
        departName: [
          { required: true, message: "请输入发布部门", trigger: "blur" },
        ],
        isPublish: [
          { required: true, message: "请选择是否发布", trigger: "change" },
        ],
      },
    });
    const methodsMap = reactive({
      onclose() {
        emit("close");
      },
      submit(flag) {
        console.log(dataMap.dialogForm);
        dialogFormRef.value.validate((valid) => {
          if (valid) {
            let params = {
              ...dataMap.dialogForm,
              exerciseStartTime: dataMap.dialogForm.exerciseTime[0],
              exerciseEndTime: dataMap.dialogForm.exerciseTime[1],
              label: dataMap.dialogForm.label.join(";"),
              attachment: JSON.stringify(dataMap.dialogForm.fileList),
            };
            delete params.fileList;
            if (props.isFabu && !flag) {
              params.draft = "1";
            } else {
              params.draft = "";
            }
            modifyPortalExerciseInfo(params).then((res) => {
              console.log("新增成功", Date.now());
              setTimeout(() => {
                emit("getDatas");
                emit("close");
              }, 500);
            });
          } else {
            return false;
          }
        });
      },
    });
    onMounted(() => {
      let defaultData = {
        exerciseContent: "",
        exerciseTime: [],
      };
      if (props.dataForm) {
        let temp = JSON.parse(JSON.stringify(props.dataForm));
        if (temp.label) {
          temp.label = temp.label.split(";");
        }
        if (temp.exerciseStartTime && temp.exerciseEndTime) {
          temp.exerciseTime = [temp.exerciseStartTime, temp.exerciseEndTime];
        }
        temp.fileList = [];
        if (temp.attachment) {
          try {
            temp.fileList = JSON.parse(temp.attachment);
          } catch (error) {}
        }
        dataMap.dialogForm = {
          ...defaultData,
          ...temp,
        };
      } else {
        dataMap.dialogForm = {
          ...defaultData,
        };
      }
    });
    return {
      ...toRefs(dataMap),
      ...toRefs(methodsMap),
      dialogFormRef,
    };
  },
});
</script>
